<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>账号管理-管理系统</title>
        <meta name="keywords" content="管理系统">
        <meta name="description" content="管理系统">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="{$sys_url.static}layui/css/layui.css" media="all"> .
        <script src="{$sys_url.static}layui/layui.js" charset="utf-8"></script>
        <script src="{$sys_url.static}layui/date.js" charset="utf-8"></script>
    </head>
    <body>
        <div>
            <form class="layui-form">
                <div class="layui-form-item layui-elem-quote">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" id="id" autocomplete="off" placeholder="ID" class="layui-input">
                    </div>
                    <label class="layui-form-label">广告名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" id="name" autocomplete="off" placeholder="请输入广告名称" class="layui-input">
                    </div>
                    <label class="layui-form-label">位置</label>
                    <div class="layui-input-inline">
                        <select id="id_position" name="id_position" lay-verify="">
                            <option value="0" selected>全部</option>
                            {volist name="datas" id="vo"}
                            <option value="{$vo.id}" >{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <button type="button" class="layui-btn btnSearch" lay-filter="search" lay-submit>查询</button>
                    <button type="button" class="layui-btn layui-btn-normal btnAddfl">+ 位置</button>
                    <button type="button" class="layui-btn layui-btn-normal btnAdd">+ 新增</button>
                </div>
            </form>
            <table class="layui-hide" id="tableList" lay-filter="demo">


            </table>
        </div>
    </body>
    <script type="text/html" id="add_time">
        {{ dateFormat(d.add_time) }}
    </script>
    <script type="text/html" id="update_time">
        {{ dateFormat(d.update_time) }}
    </script>
    <script type="text/html" id="statusSwitch">
        <!--0:禁用; 1:启用 -->
        <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>
    </script>
    <script type="text/html" id="barDemo"> 

        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        layui.use('table', function() {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            //加载表格
            table.render({
                elem: '#tableList'
                , url: '{$sys_url.ctr}/getList'
                , cellMinWidth: 80
                        //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                        {field: 'id', width: '5%', title: 'ID', sort: true, align: 'center'},
                        {field: 'tname', title: '广告位置', align: 'center'},
                        {field: 'title', title: '广告名称', align: 'center'},
                        {field: 'image_url', title: '预览图片',align: 'center',templet:'<div><img src="{{d.image_url}}"  width="30px" height="20px" class="layui-upload-img" onclick="previewImg(this)"></div>'},
                        {field: 'link_url', title: '链接地址', align: 'center'},
                        {field: 'px', title: '排序', align: 'center', edit: 'text'},
                        {field: 'status', title: '状态', align: 'center', templet: '#statusSwitch', unresize: true},
                        {field: 'add_time', title: '添加时间', align: 'center',templet:'#add_time'},
                        {field: 'update_time', title: '修改时间', align: 'center',templet:'#update_time'},
                        {fixed: 'right', width: '20%', title: '操作', align: 'center', toolbar: '#barDemo'}
                    ]],
                page: true
            });
            //重载表格
            $('.btnSearch').on('click', function() {
                table.reload('tableList', {
                    page: {
                        curr: 1
                                //重新从第 1 页开始
                    },
                    where: {
                        key: {
                            id: $('#id').val(),
                            title: $('#name').val(),
                            id_position: $('#id_position').val()
                        }
                    }
                });
            });

            table.on('edit(demo)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段

                $.ajax({
                    url: '{$sys_url.ctr}/sort',
                    type: 'post',
                    data: {id: data.id, px: obj.value},
                    dataType: "json",
                    beforeSend: function () {
                        console.log(JSON.stringify(data.field));
                    },
                    success: function (data) {
                        //do something
                        console.log(data);
                        if (data.code == 1) {
                            var index = parent.layer.getFrameIndex(window.name);
                            //获取当前窗口索引
                            parent.layer.msg('操作成功', {icon: 1});
                        } else {
                            layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                        }
                    },
                    error: function (data) {
                        //do something
                        console.log(data);
                        layer.msg('与服务器连接失败', {icon: 2});
                    }
                });
            });


            //监听禁用启用操作
            form.on('switch(statusDemo)', function (obj) {
                var id=this.id;
                var status=0;
                var id_seller = $("#id_seller").val();
                console.log(id_seller);
                if(obj.elem.checked){ status=1}
                $.ajax({
                    url: '{$sys_url.ctr}/edit_ajax',
                    type: 'post',
                    data: {ids: id,status:status,id_seller:id_seller},
                    dataType: "json",
                    beforeSend: function () {

                    },
                    success: function (data) {
                        //do something
                        console.log(data);
                        if (data.code == 1) {
                            var index = parent.layer.getFrameIndex(window.name);
                            //获取当前窗口索引
                            parent.layer.msg('操作成功', {icon: 1});
                            //table.reload('tableList');
                        } else {
                            layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                        }
                    },
                    error: function (data) {
                        //do something
                        console.log(data);
                        layer.msg('与服务器连接失败', {icon: 2});
                    }
                });
//        layer.tips(this.value + ' ' + this.name+ '：' + obj.elem.checked, obj.othis);
            });


            //监听工具条
            table.on('tool(demo)', function(obj) {
                var data = obj.data;
                var _this = $(this);
                if (obj.event === 'detail') {
                    layer.open({
                        title: '查看账号',
                        type: 2,
                        shade: false,
                       area: ['800px', '600px'],
                        maxmin: true,
                        btnAlign: 'c',
                        anim: 0,
                        shade: [0.5, 'rgb(0,0,0)'],
                                content: 'userLook.html?id=' + data.id,
                        zIndex: layer.zIndex,
                        //重点1
                        success: function(layero) {
                            //layer.setTop(layero); //顶置窗口
                        },
                        yes: function(index, layero) {
                            //确认按钮
                        }
                    });
                } else if (obj.event === 'del') {
                    layer.confirm('ID：' + data.id + '<br />名称：' + data.title, {icon: 3, title: '是否确定删除?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/del',
                            type: 'post',
                            data: {id: data.id, status: "1"},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    //						var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('删除成功', {icon: 1});
                                    //						parent.layer.close(index);
                                    table.reload('tableList');
                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        //			layer.close(index);

                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑',
                        type: 2,
                        shade: false,
                       area: ['800px', '600px'],
                        maxmin: true,
                        btnAlign: 'c',
                        anim: 0,
                        shade: [0.5, 'rgb(0,0,0)'],
                                content: '{$sys_url.ctr}/edit/id/' + data.id,
                        zIndex: layer.zIndex, //重点1
                        success: function(layero) {
                            //layer.setTop(layero); //顶置窗口
                        },
                        yes: function(index, layero) {
                            //确认按钮
                        }
                    });
                } else if (obj.event === 'ban') {
                    layer.confirm('ID：' + data.id + '<br />名称：' + data.title, {icon: 3, title: '是否确定禁用?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/editStatus',
                            type: 'post',
                            data: {ids: data.id, status: "0"},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    //                                var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('禁用成功', {icon: 1});
                                    //                                parent.layer.close(index);
                                    //                                _this.addClass('layui-hide');
                                    parent.layer.close(index);
                                    table.reload('tableList');

                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        layer.close(index);

                    });
                } else if (obj.event === 'start-up') {
                    layer.confirm('ID：' + data.id + '<br />名称：' + data.title, {icon: 3, title: '是否确定启用?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/editStatus',
                            type: 'post',
                            data: {ids: data.id, status: "1"},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    //                                var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('启用成功', {icon: 1});
                                    parent.layer.close(index);
                                    table.reload('tableList');
                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        layer.close(index);



                    });
                } else if (obj.event === 'hide') {
                    layer.confirm('ID：' + data.id + '<br />名称：' + data.title, {icon: 3, title: '是否确定隐藏?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/editStatus',
                            type: 'post',
                            data: {ids: data.id, status: "-1"},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    //                                var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('隐藏成功', {icon: 1});
                                    //                                parent.layer.close(index);
                                    table.reload('tableList');
                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        //                    layer.close(index);

                    });
                }
            });
            //新增
            $('.btnAdd').on('click', function() {

                layer.open({
                    title: '新增',
                    type: 2,
                    shade: false,
                   area: ['800px', '600px'],
                    maxmin: true,
                    btnAlign: 'c',
                    anim: 0,
                    shade: [0.5, 'rgb(0,0,0)'],
                            content: '{$sys_url.ctr}/add',
                    zIndex: layer.zIndex,
                    //重点1
                    success: function(layero) {
                        //layer.setTop(layero); //顶置窗口
                    },
                    yes: function(index, layero) {
                        //确认按钮
                    }
                });
            });
            $('.btnAddfl').on('click', function() {

                layer.open({
                    title: '新增位置',
                    type: 2,
                    shade: false,
                   area: ['800px', '600px'],
                    maxmin: true,
                    btnAlign: 'c',
                    anim: 0,
                    shade: [0.5, 'rgb(0,0,0)'],
                            content: '/Admin/Position/add',
                    zIndex: layer.zIndex,
                    //重点1
                    success: function(layero) {
                        //layer.setTop(layero); //顶置窗口
                    },
                    yes: function(index, layero) {
                        //确认按钮
                    }
                });
            });
        });

        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var h = img.height+50; // 原图片大小
            var w = img.width; //原图片大小
            
            var imgHtml = "<img src='" + obj.src + "'  />";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [w + 'px', h + 'px'], // area: [width + 'px',height+'px']  //原图显示
                shadeClose: true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
                cancel: function() {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
                }
            });
        }
    </script>
</html>